<template>
  <a-form-model
    :ref="'lifestyleForm' + confirmType"
    :model="lifestyle"
    :label-col="formItemLayout.labelCol"
    :wrapper-col="formItemLayout.wrapperCol"
    labelAlign="left"
  >
    <a-form-model-item :label-col="{ span: 10 }" label="1.请描述您近期睡眠习惯、质量和环境"></a-form-model-item>
    <a-form-model-item label="起床时间">
      <a-radio-group v-model="lifestyle.wakeUp">
        <a-radio :value="1"> 不固定 </a-radio>
        <a-radio :value="2">
          较固定，一般<a-select style="width:120px;margin-right:10px;margin-left:10px" v-model="lifestyle.wakeUpTimes">
            <a-select-option :value="1">6:00-7:00</a-select-option>
            <a-select-option :value="2">7:00-8:00</a-select-option>
            <a-select-option :value="3">8:00-9:00</a-select-option>
            <a-select-option :value="4">9:00后</a-select-option> </a-select
          >点
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="睡觉时间">
      <a-radio-group v-model="lifestyle.sleep">
        <a-radio :value="1"> 不固定 </a-radio>
        <a-radio :value="2">
          较固定，一般<a-select style="width:120px;margin-right:10px;margin-left:10px" v-model="lifestyle.sleepTimes">
            <a-select-option :value="1">21:00-22:00</a-select-option>
            <a-select-option :value="2">22:00-23:00</a-select-option>
            <a-select-option :value="3">23:00-24:00</a-select-option>
            <a-select-option :value="4">24:00后</a-select-option> </a-select
          >点
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="午休时间">
      <a-radio-group v-model="lifestyle.lunchBreak">
        <a-radio :value="1"> 无 </a-radio>
        <a-radio :value="2">
          有<a-select style="width:120px;margin-right:10px;margin-left:10px" v-model="lifestyle.lunchBreakTimes">
            <a-select-option :value="1">12:00-13:00</a-select-option>
            <a-select-option :value="2">13:00-14:00</a-select-option>
            <a-select-option :value="3">14:00-15:00</a-select-option> </a-select
          >点
        </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="睡眠质量" style="margin-bottom:0">
      <a-radio-group v-model="lifestyle.sleepQuality">
        <a-radio :value="1"> 很好 </a-radio>
        <a-radio :value="2"> 一般 </a-radio>
        <a-radio :value="3"> 不好 </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item
      label="原因"
      v-if="lifestyle.sleepQuality == 2 || lifestyle.sleepQuality == 3"
      style="margin-bottom:0"
    >
      <a-checkbox-group v-model="lifestyle.sleepQualityReason">
        <a-checkbox :value="1"> 多梦 </a-checkbox>
        <a-checkbox :value="2"> 入睡难 </a-checkbox>
        <a-checkbox :value="3"> 易醒 </a-checkbox>
        <a-checkbox :value="4">
          其他
        </a-checkbox>
        <a-input
          style="width:150px"
          v-model="lifestyle.sleepQualityReasonDetail"
          :max-length="10"
          placeholder="限制10字符内"
        />
      </a-checkbox-group>
    </a-form-model-item>
    <a-form-model-item label="睡眠环境" style="margin-bottom:0">
      <a-radio-group v-model="lifestyle.sleepEnvironment">
        <a-radio :value="1"> 很好 </a-radio>
        <a-radio :value="2"> 一般 </a-radio>
        <a-radio :value="3"> 不好 </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item
      label="原因"
      v-if="lifestyle.sleepEnvironment == 2 || lifestyle.sleepEnvironment == 3"
      style="margin-bottom:0"
    >
      <a-checkbox-group v-model="lifestyle.sleepEnvironmentReason">
        <a-checkbox :value="1"> 吵杂 </a-checkbox>
        <a-checkbox :value="2"> 光线强 </a-checkbox>
        <a-checkbox :value="3"> 空气不好 </a-checkbox>
        <a-checkbox :value="4">
          其他
        </a-checkbox>
        <a-input
          style="width:150px"
          v-model="lifestyle.sleepEnvironmentReasonDetail"
          :max-length="10"
          placeholder="限制10字符内"
        />
      </a-checkbox-group>
    </a-form-model-item>
    <a-form-model-item label="睡眠质量评分">
      <a-rate v-model="lifestyle.sleepHabitsScore"></a-rate>
      <span v-if="lifestyle.sleepHabitsScore" class="ant-rate-text">{{ lifestyle.sleepHabitsScore }}分</span>
    </a-form-model-item>
    <a-form-model-item label="小结">
      <a-textarea
        v-model="lifestyle.sleepHabitsComment"
        :maxLength="100"
        :rows="4"
        placeholder="请输入100字以内的小结"
      />
      <div>
        <a :style="{ display: 'inline-block', float: 'right', color: 'red' }" @click="handleTemplateSave">
          保存到模版
        </a>
        <a
          @click="handleTemplate"
          :style="{ display: 'inline-block', float: 'right', marginRight: '20px', color: 'red' }"
        >
          从模版选择
        </a>
      </div>
    </a-form-model-item>
    <a-modal
      :visible="saveVisit"
      title="保存到模版"
      ref="saveVisit"
      width="500px"
      @ok="handleOk"
      @cancel="handleCancel"
      :confirm-loading="typeConfirmLoading"
    >
      <a-form-model ref="editform" :model="category" :rules="validatorRules">
        <a-form-model-item label="分类名称" :labelCol="{ span: 4 }" :wrapperCol="{ span: 8 }" prop="categoryType">
          <a-select placeholder="请选择分类" v-model="category.categoryType">
            <a-select-option v-for="item in list" :key="item.dataId" :value="item.dataId">{{
              item.categoryName
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <advise-template ref="modalForm" @ok="modalFormOk"></advise-template>

    <a-form-model-item :wrapper-col="{ span: 12, offset: 10 }">
      <a-button type="primary" @click="save" :loading="saveLoading">保存</a-button>
      <a-popconfirm placement="topLeft" ok-text="是" cancel-text="否" @confirm="confirm">
        <template slot="title">
          <p>此操作代表你已完成了页面的填写，是否继续？</p>
        </template>
        <a-button type="primary" style="margin-left: 30px" :loading="saveLoading">确认完成</a-button>
      </a-popconfirm>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import { postAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import AdviseTemplate from '../../bloodProfile/modules/AdviseTemplate'
export default {
  name: 'SleepQuality',
  props: ['lifestyle', 'list'],
  components: { AdviseTemplate },
  data() {
    return {
      confirmType: 4,
      rate: 0,
      saveVisit: false,
      category: {},
      typeConfirmLoading: false,
      validatorRules: {
        categoryType: [{ required: true, message: '请选择分类' }]
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 2
          }
        }
      },
      rate: 0,
      saveLoading: false
    }
  },
  methods: {
    ...mapGetters(['orgCode']),
    save() {
      this.saveLoading = true
      const queryData = {
        dataId: this.lifestyle.dataId,
        lunchBreak: this.lifestyle.lunchBreak,
        lunchBreakTimes: this.lifestyle.lunchBreakTimes,
        sleep: this.lifestyle.sleep,
        sleepEnvironment: this.lifestyle.sleepEnvironment,
        sleepEnvironmentReason: this.lifestyle.sleepEnvironmentReason?.join(','),
        sleepEnvironmentReasonDetail: this.lifestyle.sleepEnvironmentReasonDetail,
        sleepHabitsComment: this.lifestyle.sleepHabitsComment,
        sleepHabitsScore: this.lifestyle.sleepHabitsScore,
        sleepQuality: this.lifestyle.sleepQuality,
        sleepQualityReason: this.lifestyle.sleepQualityReason?.join(','),
        sleepQualityReasonDetail: this.lifestyle.sleepQualityReasonDetail,
        sleepTimes: this.lifestyle.sleepTimes,
        wakeUp: this.lifestyle.wakeUp,
        wakeUpTimes: this.lifestyle.wakeUpTimes,
        patientId: this.lifestyle.patientId
      }
      postAction('/dossier/14/lifeway/sleep/update', queryData)
        .then(res => {
          if (res.success) {
            this.$message.success('操作成功')
            this.$emit('next', '5')
          } else {
            this.$message.error('操作失败')
          }
        })
        .finally(_ => {
          this.saveLoading = false
        })
    },
    handleOk() {
      this.$refs.editform.validate(valid => {
        if (valid) {
          const params = {
            patientId: this.lifestyle.patientId,
            signinType: this.category.categoryType,
            suggestContent: this.category.suggestContent,
            orgCode: this.orgCode()
          }
          postAction('/201/02/2010219', params).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.handleCancel()
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      })
    },
    handleCancel() {
      this.saveVisit = false
    },
    handleTemplateSave() {
      if (!this.lifestyle.sleepHabitsComment) {
        this.$message.warning('请填写小结')
        return
      }
      this.category.suggestContent = this.lifestyle.sleepHabitsComment
      this.saveVisit = true
    },
    modalFormOk(item) {
      this.lifestyle.sleepHabitsComment = item
    },
    handleTemplate() {
      this.$refs.modalForm.add()
    },
    confirm() {
      this.saveLoading = true
      this.$emit('confirm', this.confirmType)
      this.$emit('next', '5')
    }
  }
}
</script>

<style lang="less" scoped></style>

